<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渐变</title>
    <style>
        /*
            渐变分为线性渐变和径向渐变，渐变要用作背景图片
        */

        /*
            线性渐变：
                background-image: linear-gradient(方向, 颜色1 位置1, 颜色2 位置2, ... , 颜色n 位置n);

                方向可以使用关键词   top，right，bottom，left
                还可以使用角度 45deg
        */
        div{
            width: 200px;
            height: 200px;
        }

        .c1{
            background-image: linear-gradient(90deg, red, orange);
            background-image: linear-gradient(135deg, red, green 50%, blue 80%);
            background-image: linear-gradient(red, yellow 10%, blue 20%);
            
            /*重复渐变*/
            background-image: repeating-linear-gradient(red, yellow 10%, blue 20%);
        }

    </style>
</head>
<body>
    <div class="c1"></div>
</body>
</html>